import { StyleSheet } from 'react-native';

const AVATAR_SIZE = 44;
const AVATAR_HALF_SIZE = AVATAR_SIZE / 2;
const BLOCK = {
  backgroundColor: '#fff',
  overflow: 'hidden',
  margin: 4,
  marginBottom: 0,
  borderRadius: 10,
  borderWidth: 1,
  borderColor: '#ddd'
};

export default StyleSheet.create({
  card: {
    flexDirection: 'row',
    padding: 8,
    ...BLOCK
  },
  avatar: {
    borderRadius: AVATAR_HALF_SIZE,
    width: AVATAR_SIZE,
    height: AVATAR_SIZE,
    justifyContent: 'center',
    alignItems: 'center'
  },
  cardContent: {
    flexDirection: 'column',
    justifyContent: 'center',
    marginLeft: 10,
    marginRight: 10
  },
  baseInfo: {
    fontSize: 20
  },
  tags: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 5,
    marginBottom: 5
  },
  tag: {
    padding: 5,
    marginRight: 5,
    backgroundColor: '#eee',
    overflow: 'hidden',
    borderRadius: 5
  },
  infoWrap: {
    ...BLOCK
  },
  familyEntry: {
    ...BLOCK,
    flexDirection: 'row'
  },
  familyBtn: {
    flexGrow: 1,
    backgroundColor: '#ff6600',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 5,
    backgroundColor: '#fff'
  },
  familyBtnTitle: {
    color: '#666',
    fontSize: 14
  },
  familyBtnCount: {
    color: '#0066ff',
    fontSize: 32
  },

  triggerStyle: {
    width: 44,
    height: 44,
    justifyContent: 'center',
  },
  overlayStyle: {
    right: 5,
    marginTop: 48,
    width: 128,
    zIndex: 100
  },
});
